<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.layer1{width:100%;height:75px;background:blue;}
     .layer1-1{width:100%;height:50px;background:#3CF;text-align:center;font-size:2em;}
     .layer1-2{width:100%;height:25px;background:blue;font-size:1em;text-align:center;}
	 .layer1-2 a{width:15%;height:auto;color:#FFF;float:left; border-left:12px solid #FF0;}
	 .layer1-2 a:hover{background:#FF0;color:#000;}
.layer2{width:100%;height:300px;background:blue;}
     .layer2-1{width:25%;height:300px;background:#39F;float:left;}
     .layer2-2{width:50%;height:300px;background:#FFF;float:left;}
     .layer2-3{width:25%;height:300px;background:#FFC;float:left;}
     .layer2-4{clear:both;}
.layer2 h1{font-size:1.5em;font-weight:bold;}
     .layer2-1 a{width:100%;height:auto;font-size:1.5em;text-align:center;display:block;bcolor:#FFF; border-left:12px solid #FF0; border-top:1px solid #FFF;padding:5px 5px 5px 0.5em}
	 .layer2-1 a:hover{background:#FF0;color:#000;}
.layer3{width:100%;height:50px;background:#39F;text-align:center;}
</style>
</head>

<body>
<div class="layer1">
     <div class="layer1-1">商苑论坛</div>
     <div class="layer1-2">
     <a href="#">学习</a>
     <a href="#">体育</a>
     <a href="#">娱乐</a>
     <a href="#">青春</a>
     </div>
</div>
<div class="layer2">
     <div class="layer2-1"><h1>学院板块</h1>
      <a href="#">信息与艺术学院</a>
      <a href="#">工商管理学院</a>
      <a href="#">会计金融学院</a>
      <a href="#">智能服务学院</a>
      <a href="#">公共管理学院</a>
      <a href="#">食品药品学院</a>
     </div>
     <div class="layer2-2"><h1>帖子内容</h1></div>
     <div class="layer2-3"><h1>热帖排行</h1></div>
     <div class="layer2-4"></div>
</div>
<div class="layer3">学校地址：济南市旅游路4516号 邮编：250103</div>
</body>
</html>
